<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
					<view class="page_title font_18_333">
						{{lvshiInfo.name}}
					</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/lawyer/lsxq-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="m-top flex flex_sb">
					<view class="m-top-left">
						<view class="flex">
							<view class="ls-name">
								{{lvshiInfo.name}}
							</view>
							<image class="h23 u-m-l-10" src="../../static/img/home/h23.png" mode="aspectFill"></image>
						</view>
						<view class=" flex">
							<view class="zhizhao line_1">
								执业认证 {{lvshiInfo.license_num}}
							</view>
						</view>
					</view>
					<view class="m-top-r">
						<view class="r-img">
							<image class="headimg" :src="lvshiInfo.avatar" mode="aspectFill"></image>
							<button class="fx-icon-div" open-type="share" style="background-color: #F7EAD3;">
								<image class="fx-icon" src="../../static/img/home/fx-icon.png" mode=""></image>
							</button>
						</view>
						<view class="flex flex_cen u-m-t-12" v-if="lvshiInfo.is_online && lvshiInfo.is_online==1">
							<view class="yuan"></view>
							<view class="zx-s u-m-l-10">在线</view>
						</view>
					</view>
				</view>
				<view class="jianjie">
					<view class="flex">
						<view class="">擅长：</view>
						<view class="flex">
							<view v-if="index2<3" class="line_1 bq-item" :class="index2<3?'bq'+(index2+1):'bq1'"
								v-for="(item2,index2) in lvshiInfo.tasks" :key="index2">
								{{item2}}
							</view>

						</view>
					</view>
					<view class="u-m-t-20 line_3">
						简介：{{lvshiInfo.profile_note}}
					</view>
					<view class=" flex flex_end" @click="smShow=true">
						<view class="ckda">
							查看档案
						</view>
						<u-icon name="arrow-right" color="#0062FF" size="20"></u-icon>
					</view>
					<view class="flex flex_sb u-m-t-30">
						<view class="flex ls-zy ls-zy2 flex_cen">
							<image class="ls-xing" src="../../static/img/home/h24.png" mode=""></image>
							<view class="u-m-l-4 ls-fs">{{lvshiInfo.mark}}</view>
						</view>
						<view class="flex ls-zy flex_cen">
							<view class="font_14_666">执业：</view>
							<view class="ls-fs">{{lvshiInfo.license_year}}年</view>
						</view>
						<view class="flex ls-zy flex_cen">
							<view class="font_14_666">响应速度：</view>
							<view class="ls-fs">10秒</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="font_16_333 font_weight u-m-t-28 u-m-l-32">
			服务项目
		</view>
		<view class="u-padding-32" v-if="id">
			<fuwuList  type2="2" :sid="id"  @suborder="suborder2"></fuwuList>
		</view>
		<view class="u-p-l-32 u-p-r-32 u-p-b-30">
			<u-tabs bg-color="#F5F5F6" active-color="#000" inactive-color="#727272" :list="list" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
			<view class="tab-div u-m-t-30">
				<view class="pingjia" v-if="current==2">
					<view class="pingjia-top flex flex_cen">
						<view class="flex">
							<view class="pj-num">
								{{lvshiInfo.mark}}
							</view>
							<view class="pj-xing flex u-m-l-40">
								<image src="../../static/img/home/h24.png" mode="" v-for="i in lvshiInfo.mark" :key="i">
								</image>
							</view>
						</view>
					</view>
					<view class="flex flex_sb u-m-t-26">
						<view class="font_16_333">
							用户评论（{{pinglunList.length}}）
						</view>
						<!-- <view class="font_12_666">
							更多
							<u-icon name="arrow-right" color="#666" size="20"></u-icon>
						</view> -->
					</view>
					<view class="pj-main ">
						<view class="pj-item flex_only" v-for="(item,index) in pinglunList" :key="index">
							<image class="headimg" :src="item.user.image" mode=""></image>
							<view class="u-m-l-16" style="width: 540rpx;">
								<view class="flex flex_sb font_14_666">
									<view class="">
										{{item.is_show==1?'匿名用户':item.user.name}}
									</view>
									<view class="">
										{{item.created_at}}
									</view>
								</view>
								<view class="u-m-t-16">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="anli" v-if="current==1">
					<u-time-line>
						<u-time-line-item nodeTop="12" v-for="(item2,index2) in anliList" :key="index2">
							<template v-slot:node>
								<view class="u-node"></view>
							</template>
							<template v-slot:content>
								<view @click="todetail(1,item2)">
									<view class="">
										<span class="u-order-title">{{item2.created_at}}</span>
									</view>

									<view class="u-order-desc">
										{{item2.title}}
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
					<!-- <view class="text_center font-24-0062FF">
						查看更多案例
						<u-icon name="arrow-down" color="#0062FF" size="20"></u-icon>
					</view> -->
				</view>

				<view class="zhishi" v-if="current==0">
					<view class="zs-item" v-for="(item2,index2) in zhishiList" :key="index2" @click="todetail(2,item2)">
						<view class="line_1 font_weight">
							{{item2.title}}
						</view>
						<view class="u-m-t-16 line_3 font_14_666 linhe48">
							<rich-text :nodes="item2.description"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</view>



		<u-popup v-model="smShow" mode="bottom" closeable border-radius="32">
			<view class="po-bikan">
				<view class="bk-title">
					律师档案
				</view>
				<view class=" u-m-t-32">
					<view class="po-item flex">
						<image class="po-icon" src="../../static/img/home/po-1.png" mode=""></image>
						<view class="u-m-l-16 bk-content">
							<view class="font_weight">
								执照认证
							</view>
							<view class="font_12_666 u-m-t-4">
								{{lvshiInfo.license_num}}
							</view>
						</view>
					</view>
					<view class="po-item flex">
						<image class="po-icon" src="../../static/img/home/po-2.png" mode=""></image>
						<view class="u-m-l-16 bk-content">
							<view class="font_weight">
								教育背景
							</view>
							<view class="font_12_666 u-m-t-4">
								{{lvshiInfo.educate_note}}
							</view>
						</view>
					</view>
					<view class="po-item flex">
						<image class="po-icon" src="../../static/img/home/po-3.png" mode=""></image>
						<view class="u-m-l-16 bk-content">
							<view class="font_weight">
								荣誉奖项
							</view>
							<view class="font_12_666 u-m-t-4">
								{{lvshiInfo.honor_note}}
							</view>
						</view>
					</view>
					<view class="po-item flex_only">
						<image class="po-icon" src="../../static/img/home/po-4.png" mode=""></image>
						<view class="u-m-l-16 bk-content">
							<view class="font_weight">
								简介
							</view>
							<view class="font_12_666 u-m-t-4 lin36">
								{{lvshiInfo.profile_note}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</u-popup>
		
		<u-popup v-model="sofuwuShow" mode="bottom" closeable border-radius="32">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					服务项目名称
				</view>
				<view class="" v-if="id">
					<subOrder @nexttick="nexttick" :priceList="priceList" :lid="id"></subOrder>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		components: {
			fuwuList
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FFFFFF'],
					slideBackgroundColor: [1, '#FFFFFF']
				},
				list: [{
					name: '知识分享',
				}, {
					name: '案例'
				},{
					name: '用户评价'
				} ],
				current: 0,

				smShow: false,
				id: '',
				lvshiInfo: [],
				pinglunList: [],
				anliList: [],
				zhishiList: [],
				
				sofuwuShow:false,
				priceList:null
			}
		},
		onShareAppMessage(res) {
			return {
				imageUrl: this.lvshiInfo.avatar,
				title: this.lvshiInfo.name,
				path: "/pages/lawyer/lawyerDetail?id=" + this.id + '&share=true',
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad(e) {
			this.id = e.id
			this.pinglun()
			this.lvdetail()
			this.getanli()
			this.gezhishi()
		},
		methods: {
			suborder2(e){
				this.sofuwuShow = true
				this.priceList = e
			},
			getanli() {
				this.$api({
					url: '/lawyer/getCaseList',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.id //律师ID，所有数据传-1，自己数据传0，其它律师数据传具体ID
					},
				}).then(res => {
					if (res.code == 1) {
						this.anliList = res.data.list
					}
				})
			},
			gezhishi() {
				this.$api({
					url: '/lawyer/getKnowledgeList',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.id //律师ID，所有数据传-1，自己数据传0，其它律师数据传具体ID
					},
				}).then(res => {
					if (res.code == 1) {
						this.zhishiList = res.data.list
					}
				})
			},
			lvdetail() {
				this.$api({
					url: '/lawyer/detail',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						this.lvshiInfo = res.data
					}
				})
			},

			pinglun() {
				this.$api({
					url: '/lawyer/detail_comment',
					method: 'get',
					data: {
						limit: 1000,
						lawyer_id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						this.pinglunList = res.data.data
					}
				})
			},

			change(index) {
				this.current = index;
			},
			back() {
				// 尝试后退一个页面
				uni.navigateBack({
				  success: function () {
				    console.log('有前边的路由');
				  },
				  fail: function () {
					  uni.reLaunch({
					  	url: "/pages/index/index"
					  })
				    // console.log('无前边的路由，当前页面是第一个页面');
				  }
				});
				// uni.navigateBack()
			},
			todetail(e, item) {
				uni.navigateTo({
					url: "/pages/lawyer/anliDetail?type=" + e + "&id=" + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.po-bikan {
		padding: 40rpx 34rpx;
		background: #FFFFFF;
		width: 690rpx;

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		.po-item {
			margin-top: 36rpx;
		}

		.bk-content {
			width: 582rpx;

		}

		.po-icon {
			width: 56rpx;
			height: 56rpx;
		}


	}

	.lin36 {
		line-height: 36rpx;
	}

	.tab-div {
		width: 686rpx;
		// height: 672rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.linhe48 {
			line-height: 40rpx;
		}

		.font-24-0062FF {
			font-size: 24rpx;
			color: #0062FF;
		}

		.zs-item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #EFEFEF;
		}

		.anli {
			.u-node {
				width: 12rpx;
				height: 12rpx;
				background: #FC3A30;
				border-radius: 50%;
			}

			.u-order-title {
				font-size: 20rpx;
				color: #666666;
				padding: 6rpx 12rpx;
				background: #F4F4F4;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.u-order-desc {
				font-size: 28rpx;
				color: #000000;
				line-height: 48rpx;
				margin-top: 26rpx;
			}
		}



		.pingjia {

			.pingjia-top {
				width: 624rpx;
				height: 94rpx;
				background: linear-gradient(180deg, #FCF6F3 0%, #FFFFFF 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.pj-num {
					font-weight: bold;
					font-size: 44rpx;
					color: #FD8643;
				}

				.pj-xing {


					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}
			}

			.pj-main {
				margin-top: 20rpx;

				.pj-item {
					padding: 32rpx 0;
					border-bottom: 2rpx solid #F7F7F7;


					.headimg {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #eee;
					}
				}
			}
		}
	}


	/deep/.u-tab-bar {
		background-color: #FC3A30 !important;
	}

	.ckda {
		text-decoration: underline;
		font-size: 24rpx;
		color: #0062FF;
		line-height: 80rpx;

	}

	.bq-item {
		margin-right: 8rpx;
		font-size: 20rpx;
		padding: 4rpx 6rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.bq1 {
		color: #FF4A50;
		background: #F8EDED;
	}

	.bq2 {
		color: #5385E3;
		background: #E5F3FF;
	}

	.bq3 {
		color: #F7790D;
		background: #FFE8D3;
	}

	.ls-xing {
		width: 32rpx;
		height: 32rpx;
	}

	.ls-fs {
		font-weight: bold;
		font-size: 28rpx;
		color: #FD8643;
	}

	.ls-zy {
		padding-left: 20rpx;
		border-left: 1px #999 solid;
		// margin-left: 20rpx;
		width: 38%;
	}

	.ls-zy2 {
		border-style: none;
		width: 24%;
	}

	.nav_wrap {
		width: 100%;
		position: relative;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	.main-div {
		position: relative;
		width: 100%;

		.main-bg {
			width: 100%;
			height: 792rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.zhanwei {
			width: 100%;
		}
	}

	.m-d {
		position: relative;
		padding-top: 88rpx;
		z-index: 2;
	}

	.m-top {
		padding: 20rpx 40rpx;

		.m-top-left {

			.ls-name {
				font-size: 60rpx;
				color: #000000;
			}

			.h23 {
				width: 32rpx;
				height: 28rpx;
			}

			.zhizhao {
				font-size: 24rpx;
				color: #713005;
				padding: 0 20rpx;
				height: 34rpx;
				background: #FBF1DE;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				margin-top: 12rpx;
				max-width: 450rpx;
			}
		}

		.m-top-r {

			.r-img {
				position: relative;
				width: 176rpx;
				height: 216rpx;

				.headimg {
					width: 176rpx;
					height: 216rpx;
					border-radius: 8rpx;
				}

				.fx-icon-div {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 32rpx;
					height: 32rpx;
					background: #F7EAD3;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 6rpx;

					.fx-icon {

						width: 20rpx;
						height: 20rpx;

					}
				}

			}

			.zx-s {}

			.yuan {
				width: 12rpx;
				height: 12rpx;
				background: #20C064;
				border-radius: 50%;
			}
		}

	}

	.jianjie {
		width: 686rpx;
		// height: 302rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 24rpx;
	}
</style>